<template>
    <div class="baseCount">
        <div class="tabs">
            <zlc-tabs :datas="datas" @select="select"></zlc-tabs>
        </div>
        <div class="data">
            <zlc-nodata v-if="!xAxisData.length"></zlc-nodata>
            <zlc-chat v-else :option="jdslOption" id="xfwhtj" class="chat"></zlc-chat>
        </div>
    </div>
</template>

<script>
import zlcChat from "../../../components/zlcChat/zlcChat.vue";
import zlcTabs from "../../../components/zlcTabs/zlcTabs.vue";
import * as echarts from 'echarts'
import {reactive, ref, watch} from "vue"
import ZlcNodata from "../../../components/zlcNodata/zlcNodata.vue";
export default {
    name: "landValue",
    components: {
        ZlcNodata,
        zlcChat,
        zlcTabs
    },
    props:{
        data:{
            type: Object,
            default(){
                return {}
            }
        }
    },
    setup(props, ctx){
        let datas = ref([
            {
                name: '市统计',
                field: 'city'
            },
            {
                name: '单位统计',
                field: 'depart'
            },
            {
                name: '省统计',
                field: 'province'
            },
        ])
        let xAxisData = ref([])
        let seriesData = ref([])
        let dataCopy = ref({})
        //基地数量chartsOption
        let jdslOption = reactive({
            grid:{
                left: 30,
                right: 10,
                top: 20,
                bottom: 50
            },
            tooltip:{
                show: true,
                confine: true //弹窗固定在盒子内
            },
            xAxis: {
                type: 'category',
                data: [],
                axisLabel: {
                    interval: 0, // 设置为 0 表示全部显示标签
                    textStyle: {
                        color: '#fff' // 更改 X 轴标签的字体颜色
                    },
                    formatter: function (value) {
                        if(value.length > 4){
                            return value.substring(0, 4) + '...'
                        }else{
                            return value
                        }
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    textStyle: {
                        color: '#fff' // 更改 X 轴标签的字体颜色
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                        color: '#494949'
                    }
                },
                max: 100
            },
            dataZoom: {
                type: 'slider',
                start: 0,
                end: 50,  // 设置初始显示的范围，根据需要调整
                xAxisIndex: 0,
                filterMode: 'filter',
                height: 0,
                bottom: 25,
                handleStyle: {
                    color: '#3366cc', // 设置滚动条颜色
                    borderColor: '#3366cc' // 设置滚动条边框颜色
                },
                backgroundColor: 'rgba(255, 0, 0, 0.1)',
                showDetail: false
            },
            series: {
                data: [],
                type: 'bar',
                showBackground: true,
                barWidth: 15,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            { offset: 0, color: '#fff' },
                            { offset: 0.2, color: '#188df0' },
                            { offset: 1, color: '#188df0' }
                        ]
                    )
                },
                // backgroundStyle: {
                //     color: 'rgba(180, 180, 180, 0.2)'
                // }
            }
        })

        watch(() => props.data, newVal => {
            if(newVal){
                dataCopy.value = newVal
                select({
                    field: datas.value[0].field
                })
            }
        }, { deep: true })

        let select = val => {
            xAxisData.value = []
            seriesData.value = []
            dataCopy.value[val.field].forEach(item => {
                seriesData.value.push(item.dbCount)
                xAxisData.value.push(item.name)
            })

            jdslOption.xAxis.data = xAxisData.value
            jdslOption.series.data = seriesData.value
            jdslOption.yAxis.max = Math.max(...seriesData.value) + 10
            jdslOption.dataZoom.end = Math.floor((4 / dataCopy.value[val.field].length) * 100)
        }
        return {
            datas,
            jdslOption,
            select,
            xAxisData,
            seriesData
        }
    }
}
</script>

<style scoped lang="less">
.baseCount{
    width: 100%;
    height: 100%;
    .tabs{
        width: 100%;
        height: 30px;
        line-height: 30px;
        margin-top: 10px;
    }
    .data{
        width: 100%;
        height: calc(100% - 30px);
        .chat{
            height: 100%;
        }
    }

}
</style>
